<template>
    <div class="wrapper">
        <swiper :options="swiperOption" ref="mySwiper" v-if="swiper">
        <!-- slides -->
            <swiper-slide v-for="item in list" :key="item.id">
                <img class="swiper-img" :src="item.imgUrl" alt="">
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    export default {
        name:'HomeSwiper',
        props:{
            list:Array
        },
        data(){
            return {
                swiperOption: {
                    pagination: '.swiper-pagination',
                    loop: true,
                    autoplay:3000,
                    speed:600,
                    effect:'left',
                    clickable: true,
                    bulletClass: 'my-bullet',
                    bulletActiveClass: 'my-bullet-active'
                }
            }
        },
         computed: {
            swiper() {
                return this.list.length;
            }
        }
    }
</script>

<style  lang="scss">
    .my-bullet{
        border-radius:.08rem;
        width:.16rem;
        height:.16rem;
        margin:0 .08rem;
        display:inline-block;
        background:rgba(0,0,0,0.20);
    }
    .my-bullet-active{
        background:#3CDBC0;
        width:0.32rem;
        background:#fff !important;
    }
    .wrapper{
        overflow:hidden;
        width:100%;
        height:0;
        padding-bottom:(200/640)*100%;
    }
    .swiper-img{
        width:100%;
    }
</style>